// 轮播图
setTimeout(function() {
    var galleryTop = new Swiper('.gallery-top', {
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 10,
        loop: true
    });
    var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: 'auto',
        touchRatio: 0.2,
        slideToClickedSlide: true,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',

    });
    galleryTop.params.control = galleryThumbs;
    galleryThumbs.params.control = galleryTop;
}, 3000)


//  返回顶部 
$(window).scroll(function() {
    let t = $(window).scrollTop()

    if (t > 1000) {
        // .fhdb 是出现的元素
        $('.fhdb').css('display', 'flex')
    } else {
        $('.fhdb').hide()
    }
})
$('.fhdb').click(function() {
    let t = $(window).scrollTop()

    let timer = setInterval(function() {
        t /= 2
        t = Math.floor(t)

        $(window).scrollTop(t)
        if (t === 0) {
            clearInterval(timer)
        }
    }, 16)
})

// 吸顶点击变色
let aceilingChild = document.querySelectorAll('.ceiling_suction a')

aceilingChild.forEach(function(e, ind) {
    e.onclick = function() {
        for (let i = 0; i < aceilingChild.length; i++) {
            aceilingChild[i].className = ''
        }
        e.className = 'on'
    }
})

//吸顶+电话号码 小程序定位

let oCeiling = document.querySelector('.ceiling_suction')
let oMain = document.querySelector('main')
let oHeadphone = document.querySelector(".head_phone")
var y = oMain.offsetTop
let oSwitchMap = document.querySelector('#switchMap')
let y1 = oSwitchMap.offsetTop

function fn() {
    window.onscroll = function() {
        let top = document.documentElement.scrollTop

        if (top >= y && top <= y1) {
            oCeiling.style.display = 'block'
            oCeiling.style.position = 'fixed'
            oCeiling.style.left = '0'
            oCeiling.style.top = '0'
            oHeadphone.style.position = 'fixed'
            oHeadphone.style.right = '60px'
            oHeadphone.style.top = '60px'
        } else if (top >= y1) {
            oCeiling.style.display = 'block'
            oCeiling.style.position = 'fixed'
            oCeiling.style.left = '0'
            oCeiling.style.top = '0'
            oHeadphone.style.position = 'absolute'
            oHeadphone.style.right = '60px'
            oHeadphone.style.top = '3430px'
        } else {
            oCeiling.style.position = ''
            oCeiling.style.display = 'none'
            oHeadphone.style.position = ''
        }
    }
}
fn()

// 户型图选项卡
let aSelect_tabs = document.querySelectorAll('.select-tabs  a')
let aHouse_type_list = document.querySelectorAll('.House_type_list')

aSelect_tabs.forEach(function(e, ind) {
    e.onclick = function() {
        for (let i = 0; i < aSelect_tabs.length; i++) {
            aSelect_tabs[i].className = 'items'
            aHouse_type_list[i].className = 'House_type_list'
        }
        e.className = 'items active'
        aHouse_type_list[ind].className = 'House_type_list on'
    }
})

// 户型图点击出现更多列表内容
let oDn = document.querySelector('.House_type_list ul li.dn')
let oclosed = document.querySelector('.closed')
let oSpan = document.querySelector('.closed a span')
let oI = document.querySelector('.closed a i')

oclosed.onclick = function() {
    let flag = true
    if (flag === true) {
        oSpan.innerHTML = '收起'
        oDn.style.display = 'block'
        flag = false
    } else {
        oSpan.innerHTML = '点击查看剩余1套户型图'
        oDn.style.display = 'none'
        flag = true
    }
}


// 动态时间线点击出现更多列表内容
let oNewhouseNews = document.querySelector("#newhouseNews")
let arr = [`<li class="dynamic-tree-item  clearfix">
<p class="date fl">
    <span>01月26日</span>
    <em>2021年</em>
</p>
<div class="con fl">
    <p class="node-circle"><i class="iconfont icontime"></i></p>
    <div class="dynamic-tree-con">
        <i class="icons_saledetails arrow"></i>
        <div class="title">尽享深中学教育</div>

        <div class="dynamic-tree-text">
            紫园云墅准现楼在售，尽享深中学教育，房墅级品质，紧邻盐龙大道，3线地铁，通达全城。
        </div>

    </div>
</div>
</li>`,
    `<li class="dynamic-tree-item  clearfix">
<p class="date fl">
    <span>01月12日</span>
    <em>2021年</em>
</p>
<div class="con fl">
    <p class="node-circle"><i class="iconfont icontime"></i></p>
    <div class="dynamic-tree-con">
        <i class="icons_saledetails arrow"></i>
        <div class="title">紧邻地铁</div>

        <div class="dynamic-tree-text">
            紫园云墅位于16号线双地铁口，干线交通贯穿粤港澳大湾区，多维交通助力城际枢纽落地。
        </div>

    </div>
</div>
</li>`,
    `<li class="dynamic-tree-item clearfix last">
<p class="date fl">
    <span>12月28日</span>
    <em>2020年</em>
</p>
<div class="con fl">
    <p class="node-circle"><i class="iconfont icontime"></i></p>
    <div class="dynamic-tree-con">
        <i class="icons_saledetails arrow"></i>
        <div class="title">坐拥醇熟配套</div>

        <div class="dynamic-tree-text">
            紫园云墅四公园环绕，出门即置身城市天然氧吧，还享剧院、图书馆、COCOPARK、万科里等醇熟配套。
        </div>

    </div>
</div>
</li>`,
    `<li class="dynamic-tree-item  clearfix">
<p class="date fl">
    <span>01月26日</span>
    <em>2021年</em>
</p>
<div class="con fl">
    <p class="node-circle"><i class="iconfont icontime"></i></p>
    <div class="dynamic-tree-con">
        <i class="icons_saledetails arrow"></i>
        <div class="title">尽享深中学教育</div>

        <div class="dynamic-tree-text">
            紫园云墅准现楼在售，尽享深中学教育，房墅级品质，紧邻盐龙大道，3线地铁，通达全城。
        </div>

    </div>
</div>
</li>`,
    `<li class="dynamic-tree-item  clearfix">
<p class="date fl">
    <span>01月12日</span>
    <em>2021年</em>
</p>
<div class="con fl">
    <p class="node-circle"><i class="iconfont icontime"></i></p>
    <div class="dynamic-tree-con">
        <i class="icons_saledetails arrow"></i>
        <div class="title">紧邻地铁</div>

        <div class="dynamic-tree-text">
            紫园云墅位于16号线双地铁口，干线交通贯穿粤港澳大湾区，多维交通助力城际枢纽落地。
        </div>

    </div>
</div>
</li>`,
    `<li class="dynamic-tree-item clearfix last">
<p class="date fl">
    <span>12月28日</span>
    <em>2020年</em>
</p>
<div class="con fl">
    <p class="node-circle"><i class="iconfont icontime"></i></p>
    <div class="dynamic-tree-con">
        <i class="icons_saledetails arrow"></i>
        <div class="title">坐拥醇熟配套</div>

        <div class="dynamic-tree-text">
            紫园云墅四公园环绕，出门即置身城市天然氧吧，还享剧院、图书馆、COCOPARK、万科里等醇熟配套。
        </div>

    </div>
</div>
</li>`, `<li class="dynamic-tree-item  clearfix">
<p class="date fl">
    <span>01月26日</span>
    <em>2021年</em>
</p>
<div class="con fl">
    <p class="node-circle"><i class="iconfont icontime"></i></p>
    <div class="dynamic-tree-con">
        <i class="icons_saledetails arrow"></i>
        <div class="title">尽享深中学教育</div>

        <div class="dynamic-tree-text">
            紫园云墅准现楼在售，尽享深中学教育，房墅级品质，紧邻盐龙大道，3线地铁，通达全城。
        </div>

    </div>
</div>
</li>`,
    `<li class="dynamic-tree-item  clearfix">
<p class="date fl">
    <span>01月12日</span>
    <em>2021年</em>
</p>
<div class="con fl">
    <p class="node-circle"><i class="iconfont icontime"></i></p>
    <div class="dynamic-tree-con">
        <i class="icons_saledetails arrow"></i>
        <div class="title">紧邻地铁</div>

        <div class="dynamic-tree-text">
            紫园云墅位于16号线双地铁口，干线交通贯穿粤港澳大湾区，多维交通助力城际枢纽落地。
        </div>

    </div>
</div>
</li>`,
    `<li class="dynamic-tree-item clearfix last">
<p class="date fl">
    <span>12月28日</span>
    <em>2020年</em>
</p>
<div class="con fl">
    <p class="node-circle"><i class="iconfont icontime"></i></p>
    <div class="dynamic-tree-con">
        <i class="icons_saledetails arrow"></i>
        <div class="title">坐拥醇熟配套</div>

        <div class="dynamic-tree-text">
            紫园云墅四公园环绕，出门即置身城市天然氧吧，还享剧院、图书馆、COCOPARK、万科里等醇熟配套。
        </div>

    </div>
</div>
</li>`
]
let oExpandNews = document.getElementById('expandNews');

var str = ''; // 存储数据的内容
var num = 3; // 点击添加几个
display(num)
    // index渲染数组中的几条 
function display(index) {
    for (var i = 0; i < index; i++) {
        str += arr[i]
    }
    console.log(num)
    oNewhouseNews.innerHTML = str
    str = ''
}

oExpandNews.addEventListener('click', function() {
    if (num >= arr.length - 3) {
        num += 3
        display(num)
        document.querySelector('#shouqi').style.display = 'block'
        oExpandNews.style.display = 'none'
    } else {
        num += 3
        display(num)
    }
})
document.querySelector('#shouqi').addEventListener('click', function() {
    num = 3
    display(num)
    this.style.display = 'none'
    oExpandNews.style.display = 'block'
})

// 地图选项卡
let aChoicebox = document.querySelectorAll('.choice-box a')
aChoicebox.forEach(function(e) {
    e.onclick = function() {
        for (let i = 0; i < aChoicebox.length; i++) {
            aChoicebox[i].className = ''
        }
        e.className = 'current'

    }
})


// -----------------渲染-------------------- 
let QfangItem = JSON.parse(localStorage.getItem('QfangItem'))

// 出售信息标题
let oDetail_head = document.querySelector('.detail_head .title-wrapper')

oDetail_head.innerHTML = `
<div class="left-con">
    <h2 class="house-title">${QfangItem.name}</h2>
    <span class="onsell">在售</span>
    <div class="house-tags">
        <div class="items">现房</div>
        <div class="items">人车分流</div>
    </div>
</div>
`
    // 指南导航栏
let oCrumdslink = document.querySelector('.detail-guide')
oCrumdslink.innerHTML = ` <div class="crumbs-link">
<div class="link_inner">
    <a target="_blank" rel="nofollow" href="/">深圳Q房网</a>
    <i class="iconfont iconarrow-right-copy"></i>
    <a target="_blank" rel="nofollow" href="/">深圳新房</a>
    <i class="iconfont iconarrow-right-copy"></i>
    <a target="_blank" rel="nofollow" href="/" class="cities_layer">龙岗新房 
    <em class="iconfont iconjiantouarrow486"></em>
    <div class="links-layer">
    <ul class="cities-opts">
        <li><em>B</em><span>宝安新房</span></li>
        <li><em>D</em><span>大鹏新区新房</span></li>
        <li><em>F</em><span>福田新房</span></li>
        <li><em>G</em><span>光明区新房</span></li>
        <li><em>L</em><span>罗湖新房</span>
        <span>龙岗新房</span>
        <span>龙华新房</span></li>
        <li><em>N</em><span>南山新房</span></li>
        <li><em>P</em><span>坪山新房</span></li>
        <li><em>Y</em><span>盐田新房</span></li>
        <li><em>@</em><span>惠州新房</span>
        <span>东莞新房</span></li>
    </ul>
</div>
</a>
    <i class="iconfont iconarrow-right-copy"></i>
    <a target="_blank" rel="nofollow" href="/">大运新城新房</a>
    <i class="iconfont iconarrow-right-copy"></i>
    <a href="javascript:;" class="cur">${QfangItem.name}</a>
</div>`
    // 轮播图右边价格信息
let oInfoPrice = document.querySelector('.info_price')
oInfoPrice.innerHTML = `<dl class="price_box">
    <dt><span>均价约</span><b class="number">${QfangItem.averagePrice}</b>  
        <em class="unit">
            元/㎡
        </em>
    </dt>
    <dd class="price-date">价格有效期：2021.01.25 - 2021.02.16</dd>
    </dl>
    <a class="price_reduction">
    <i class="iconfont icon31jiangjia"></i> 降价通知
    </a>`
    // 轮播图右边列表信息
let oHeadlist = document.querySelector('.head-list')
oHeadlist.innerHTML = `<ul>
    <li class="items">
        <div class="field fl">建筑年代</div>
        <div class="text fl">${QfangItem.years}</div>
    </li>
    <li class="items">
        <div class="field fl">停车位</div>
        <div class="text fl">${QfangItem.parking}</div>
    </li>
    <li class="items">
        <div class="field fl">单元总数</div>
        <div class="text fl">${QfangItem.buildingNum}年</div>
    </li>
    <li class="items">
        <div class="field fl">总户数</div>
        <div class="text fl">${QfangItem.userCount}</div>
    </li>
    <li class="items">
        <div class="field fl">物业费</div>
        <div class="text fl">${QfangItem.propertyFee}</div>
    </li>
    <li class="items">
        <div class="field fl">物业公司</div>
        <div class="text fl">${QfangItem.propertyCompany}</div>
    </li>
    <li class="items">
        <div class="field fl">开发商</div>
        <div class="text fl">${QfangItem.developers}</div>
    </li>
    
    </ul>`

// 轮播图上边图片
let oGallerytop = document.querySelector('.swiperCon .gallery-top .swiper-wrapper')
oGallerytop.innerHTML = `
<div class="swiper-slide" style="background-image:url(${QfangItem.img})"></div>
<div class="swiper-slide" style="background-image:url(../img/4ead8565-74b2-41d7-9cb1-dd5f3e50de1a.jpg-w712x425)"></div>
<div class="swiper-slide" style="background-image:url(${QfangItem.img})"></div>
<div class="swiper-slide" style="background-image:url(${QfangItem.img})"></div>`


// 轮播图下边图片
let oGallerythumbs = document.querySelector('.swiperCon .gallery-thumbs .swiper-wrapper')
oGallerythumbs.innerHTML = `
<div class="swiper-slide" style="background-image:url(${QfangItem.img})"></div>
<div class="swiper-slide" style="background-image:url(../img/4ead8565-74b2-41d7-9cb1-dd5f3e50de1a.jpg-w712x425)"></div>
<div class="swiper-slide" style="background-image:url(${QfangItem.img})"></div>
<div class="swiper-slide" style="background-image:url(${QfangItem.img})"></div>`

// 周边楼盘列表渲染
let oNearby = document.querySelector("#nearby .cintainer")

ajax({
    url: '/SY2006-2/php/detailslist1.php',
    success(res) {
        let Nearby = JSON.parse(res).slice(0, 4)

        Nearby.forEach((item) => {
            let Nearby = `<li class="items">
            <a href="javascript:;">
                <div class="ambitus_pic">
                    <img src="${item.img}">
                </div>
                <div class="ambitus_name">
                    <div class="house_name">
                    ${item.name}
                        <span class="title-supplement">${item.LocationArea}</span>
                    </div>
                    <div class="price">
                        <span class="number fl">${item.unitPrice}</span>
                        <div class="unit">元/m²</div>
                        <div class="promotion-sign">推广</div>
                    </div>
                </div>
            </a>
        </li>`
            oNearby.innerHTML += Nearby

        })
    }
})

// 周边同价位楼盘列表渲染
let oSimilarPrice = document.querySelector("#similarPrice .cintainer")

ajax({
    url: '/SY2006-2/php/detailslist2.php',
    success(res) {
        let SimilarPrice = JSON.parse(res).slice(0, 4)

        SimilarPrice.forEach((item) => {
            let SimilarPrice = `<li class="items">
            <a href="javascript:;">
                <div class="ambitus_pic">
                    <img src="${item.img}">
                </div>
                <div class="ambitus_name">
                    <div class="house_name">
                    ${item.name}
                        <span class="title-supplement">${item.LocationArea}</span>
                    </div>
                    <div class="price">
                        <span class="number fl">${item.unitPrice}</span>
                        <div class="unit">元/m²</div>
                        <div class="promotion-sign">推广</div>
                    </div>
                </div>
            </a>
        </li>`
            oSimilarPrice.innerHTML += SimilarPrice

        })
    }
})

// 周边二手房列表渲染
let oSecondhand = document.querySelector("#secondhand .cintainer")

ajax({
    url: '/SY2006-2/php/detailslist3.php',
    success(res) {
        let Secondhand = JSON.parse(res).slice(0, 4)

        Secondhand.forEach((item) => {
            let Secondhand = `<li class="items">
            <a href="javascript:;">
                <div class="ambitus_pic">
                    <img src="${item.img}">
                </div>
                <div class="ambitus_name">
                    <div class="house_name">
                    ${item.name}
                        <span class="title-supplement">${item.LocationArea}</span>
                    </div>
                    <div class="price">
                        <span class="number fl">${item.unitPrice}</span>
                        <div class="unit">元/m²</div>
                        <div class="promotion-sign">推广</div>
                    </div>
                </div>
            </a>
        </li>`
            oSecondhand.innerHTML += Secondhand

        })
    }
})



// 预约看房
let aYuyue = document.querySelectorAll('.btn-tel-order')
let oTakelook = document.querySelector('.takelook_head')
let oBtnclose2 = document.querySelector('.takelook_head .close')
let oDialogSelectCity = document.querySelector('.dialog-overlay')


aYuyue.forEach(ele => {
    ele.onclick = function() {
        oTakelook.style.display = 'block'
        oDialogSelectCity.style.display = 'block'
        oBtnclose2.onclick = function() {
            oTakelook.style.display = 'none'
            oDialogSelectCity.style.display = 'none'
        }
    }
})